import { Component, OnInit } from '@angular/core';
import { Subscription }      from 'rxjs/Subscription';
import { BsModalService }    from 'ngx-bootstrap/modal';
import { BsModalRef }        from 'ngx-bootstrap/modal/modal-options.class';
// import comparison component
import { ComparisonComponent } from './../comparison/comparison.component';
// import add note component
import { AddNoteComponent }    from './../add-note/add-note.component';
import { GroupService }        from '../../core/services/group.service';
import { ToasterService }      from '../../share/toastr/toastr.service';
import { GroupStatus }         from '../../core/class/group-status';


@Component({
  selector: 'app-groups-detail',
  templateUrl: './groups-detail.html',
  styleUrls: ['./groups-detail.css']
})
export class GroupsDetailComponent implements OnInit {

  GroupSta: GroupStatus[] = [
      { status: 'Ranks' },
      { status: 'Prices'},
      { status: 'Review And Conut' }
  ];

  GroupSub: Subscription;

  NoteList:  any[] = [];

  GroupList: any[] = [];

  pageCount: number;
  total:     number;
  p:         number;
  errorMsg:  string;

  groupNoteId: number;

  public modalRef: BsModalRef;

  constructor(
    private bsModalService: BsModalService,
    public  groupService:   GroupService,
    public  toastrService:  ToasterService
  ) { }

  public compare() {
    this.modalRef = this.bsModalService.show(ComparisonComponent, {
      animated:            true,
      keyboard:            true,
      backdrop:            true,
      ignoreBackdropClick: true
    })
  }

  public addNote() {
    this.modalRef = this.bsModalService.show(AddNoteComponent, {
      animated:            true,
      keyboard:            true,
      backdrop:            true,
      ignoreBackdropClick: true
    })
  }

  private getProductGroups() {
    this.groupService.getGroups()
        .subscribe(
          data => {
            this.GroupList = data;
          }
         );
  }

  private getGroupsNoteList() {
    this.groupService.getGroupNote()
        .subscribe(
          data => {
            this.NoteList = data;
          }
        )
  }

  public getGroupsListPaginate(page: number) {
    const start = (page - 1) * this.pageCount;
    const end   = start + this.pageCount;
    this.groupService.getGroupsPaginate(start, end).subscribe(
      data     => {
        this.GroupList = data;
        this.total = 25;
        this.p     = page;
        console.log(`current group list content --->`, this.GroupList);
      }, error => this.errorMsg = <any> error
    );
  }

  public selectedProductGroupNote(noteId: number) {
    let notesId: number = noteId;
    console.log('current delete note id : ', notesId);
    this.groupService.deleteGroupsNote().subscribe(
      data  => {
        this.toastrService.successful('delete product group note successfuly ! ');
      },
      error => {
        this.toastrService.errors('delete product group note failed ! ');
      }
    )
  }

  public selectDeleteGroupNote() {
    this.groupService.DeleteGroupNote(this.groupNoteId)
        .subscribe(
          success => {
            this.toastrService.successful('delete group note successfuly ! ');
          },
          errors  => {
            console.log('error message ...', errors);
            this.toastrService.errors('delete group note fauled ! ');
          }
        )
  }

  public selectedDeleteGroup() {
    this.groupService.DeleteGroup()
        .subscribe(
          success => {
            this.toastrService.successful('delete group successfuly ! ');
          },
          errors =>  {
            this.toastrService.errors('delete group failure !');
          }
        )
  }


  ngOnInit() {
    this.getProductGroups();
    this.getGroupsNoteList();
  }

}
